<template>
  <div>
    <div class="usermessage">
      <div class="nm">
        <span class="ming">
          <h1>{{name}}</h1>
          <br />
          <span class="jifen">积分 0></span>
        </span>

        <van-image
          round
          width="69px"
          height="69px"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          class="photo"
          @click='phot()'
        />
      </div>
      <div class="explain">暂无简介</div>
    </div>
    <!-- <div class="personal">
      <span class="sl-1">0</span>
      <em class="sl-1">个粉丝</em>&nbsp;&nbsp;&nbsp;
      <span class="sl-1">0</span>
      <em class="sl-1">个关注</em>
    </div> -->
    <div>
      <van-tabbar v-model="active" :fixed="false" active-color="#7d7e80" :border="false">
        <van-tabbar-item icon="orders-o" class="coupon" is-link to="/coupon">优惠券</van-tabbar-item>
        <van-tabbar-item icon="star-o" is-link to="/look">关注</van-tabbar-item>
        <van-tabbar-item icon="like-o" class="collect" is-link to="/like">收藏</van-tabbar-item>
        <!-- <van-tabbar-item icon="plus">邀请好友</van-tabbar-item> -->
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      active: 0,
      title: "个人中心",
      name:''
    };
  },
  mounted() {
    this.$emit("toparent", this.title);
    let token = JSON.parse(localStorage.getItem('access-user'));
    console.log(token);
    this.name=token.data.nickname;

  },
  methods: {
    phot(){
      this.$router.push('/usermessage')
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
}
a {
  text-decoration: none;
}

.photo {
  float: right;
  margin: 30px;
}
.usermessage{
  height: 180px;
}
.nm {
  height: 100px;
}
.ming {
  float: left;
  margin: 20px 0 0 34px;
  display: block;
}
.ming h1{
  width: 100%;
  overflow:hidden;
  font-size:24px;
  float: left;
}

.jifen {
  width: 70px;
  height: 15px;
  float: left;
  border: rgb(0, 74, 185) 1px solid;
  border-radius: 20px;
  color: rgb(0, 74, 185);
  margin-top: 15px;
  text-align: center;
  font-size: 10px;
}
.explain {
  float: left;
  color: #646464;
  margin: 23px 0 0 34px;
  font-size: 10px;
}
.personal {
  width: 260px;
  height: 50px;
  margin: 0 auto;
}
.sl-1 {
  color: #8a8a8a;
  font-style: normal;
  font-size: 10px;
}
</style>
